<template>
	<view class="app l_pages">
		<jnavbar :PageId="17" :title="integralBalance.integral_text + '明细'"></jnavbar>

		<view class="banner" :style="'background:url(' + imgbg + ')'">
			<text>{{ UserInfo.integral }}</text>
			<view v-if="addons_19" class="sign_btn" @click="topointsmallpage">
				<text class="el-sc-riqi3 icon"></text>
				<text>积分商城</text>
			</view>
			<view v-if="UserInfo.integral_switch" class="sign_btn integral_switch" @click="toassettransfer">
				<text class="el-sc-jifen4 icon"></text>
				<text>积分转赠</text>
			</view>
			<text>当前账户{{ integralBalance.integral_text }}</text>
		</view>
		<!-- <u-gap height="293"></u-gap> -->
		<scroll-view @scrolltolower="getlist" class="page_container" scroll-y>
			<u-gap height="20"></u-gap>
			<view class="list">
				<view class="item uni-flex-row uni-flex-title" v-for="(item, i) in list" :key="i">
					<view class="uni-flex-row uni-flex-title">
						<view class="icon_box" v-bind:class="typelist[item.type - 1].value == '-' ? 'jian' : 'add'">
							<text v-bind:class="typelist[item.type - 1].value == '-' ? 'el-sc-jian' : 'el-sc-add'"></text>
						</view>
						<view class="uni-flex-column content">
							<text>{{ item.type_text }}</text>
							<text>{{ item.create_time }}</text>
						</view>
					</view>
					<text class="num" v-bind:class="typelist[item.type - 1].value == '-' ? 'jian' : ''">{{ typelist[item.type - 1].value }}{{ item.integral }}</text>
				</view>
			</view>
			<guesslike ref="guesslike" page_id="4"></guesslike>
		</scroll-view>
		<uni-login ref="Login" @callback="logincallback"></uni-login>
		<tab-bar ref="tabbar" :PageId="17"></tab-bar>
		<floatmenu page_id="5"></floatmenu>
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
import util from '@/common/util.js';
export default {
	onShareAppMessage() {
		return this.wxShare();
	},
	data() {
		return {
			page: 1,
			size: 10,
			list: [],
			background: {
				backgroundImage: 'linear-gradient(180deg, #fb4545, #fc4b41)'
			},
			imgbg: '',
			addons_19: false,
			typelist: [
				{
					type: 1,
					value: '+'
				},
				{
					type: 2,
					value: '-'
				},
				{
					type: 3,
					value: '+'
				},
				{
					type: 4,
					value: '+'
				},
				{
					type: 5,
					value: '-'
				},
				{
					type: 6,
					value: '+'
				},
				{
					type: 7,
					value: '+'
				},
				{
					type: 8,
					value: '+'
				},
				{
					type: 9,
					value: '-'
				},
				{
					type: 10,
					value: '-'
				},
				{
					type: 11,
					value: '+'
				},
				{
					type: 12,
					value: '+'
				},
				{
					type: 13,
					value: '+'
				},
				{
					type: 14,
					value: '+'
				},
				{
					type: 15,
					value: '-'
				},
				{
					type: 15,
					value: '+'
				}
				// 1-订单获得 2-下单消费 3-分享获得 4-后台添加 5-后台减少
			],
			integralBalance: {}
		};
	},
	async onLoad() {
		await this.$getWx;
		this.imgbg = util.getimgurl('static/images/banner_scroe.png', '1');
		let _this = this;
		this.getjuris_addons(19).then(res => {
			this.addons_19 = res;
		});
		this.getjuris('integralBalance').then(a => {
			_this.integralBalance = a;
		});
		this.getlist();
	},
	onShow() {
		var _this = this;
		this.$nextTick(a => {
			_this.$refs.tabbar.gettabs();
		});
		this.userCenter();
	},
	computed: {
		...mapState({
			UserInfo: state => state.userInfo
		})
	},
	onPullDownRefresh() {
		this.userCenter();
	},
	methods: {
		topointsmallpage() {
			this.Jumpurl(
				{
					type: 1,
					link: '/pointsmallpage/goods/goods'
				},
				'redirect'
			);
		},
		logincallback() {},
		userCenter() {
			let params = {};
			this.$http('/user/UserCenter', params, 'GET').then(res => {
				uni.stopPullDownRefresh();
				let centerinfo = res.data.msg;
				let myUserInfo = Object.assign({}, this.UserInfo, centerinfo);
				this.$store.commit('setUserInfo', myUserInfo);
			});
		},
		getlist() {
			this.changeloading({loading: true});
			this.$http('/integral/list', {page: this.page, size: this.size}, 'POST').then(res => {
				uni.stopPullDownRefresh();
				this.changeloading({loading: false});
				if (res.statusCode == 200) {
					let list = res.data.msg.data;
					if (list.length > 0) {
						this.list = this.list.concat(list);
						this.page++;
					} else {
						// uni.showToast({
						// 	title: '暂无更多',
						// 	icon: 'none'
						// });
						this.$refs.guesslike.init();
					}
				}
			});
		},
		toassettransfer() {
			this.Jumpurl({
				link: '/applicationpage/assettransfer/user?type=1',
				login_type: 2,
				type: 1
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.page_container {
	position: relative;
}
.list {
	// margin-top: 20rpx;
	.item {
		background: #fff;
		width: 720rpx;
		margin-left: 15rpx;
		padding: 0 30rpx;
		border-radius: 15rpx;
		margin-bottom: 20rpx;
		height: 138rpx;
		.icon_box {
			width: 78rpx;
			height: 78rpx;
			background-color: #19be6b;
			margin-right: 23rpx;
			border-radius: 50%;
			text-align: center;
			line-height: 78rpx;
			text {
				color: #ffffff;
				font-size: 30rpx;
			}
			&.add {
				background-color: #ff3c29;
			}
		}
		.content {
			height: 78rpx;
			justify-content: space-between;
			text:first-child {
				font-size: 30rpx;
				color: #000000;
			}
			text:last-child {
				font-size: 24rpx;
				color: #999999;
			}
		}
		.num {
			font-size: 36rpx;
			font-weight: bold;
			color: #000000;
			&.jian {
				color: #19be6b;
			}
		}
	}
}
.banner {
	width: 750rpx;
	height: 293rpx;
	// background: url(https://jzwl365.oss-cn-beijing.aliyuncs.com/static/images/banner_scroe.png);
	border-radius: 4rpx;
	display: flex;
	align-items: center;
	flex-direction: column;
	position: relative;
	// position: absolute;
	// top: 0;
	// z-index: 5;
	// margin: 0 24rpx;
}

.banner > text:first-child {
	font-size: 72rpx;
	font-family: SanFranciscoDisplay-Medium;
	font-weight: 500;
	color: rgba(255, 255, 255, 1);
	line-height: 72rpx;
	margin-top: 75rpx;
}

.banner > text:last-child {
	font-size: 28rpx;
	font-family: PingFangSC-Regular;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	margin-top: 26rpx;
}
.banner .ic_btn {
	position: absolute;
	right: 40rpx;
	color: #fff;
	bottom: 40rpx;
}
.sign_btn {
	position: absolute;
	top: 70rpx;
	right: 0;
	width: 222rpx;
	height: 70rpx;
	background: #eb4521;
	border-radius: 34rpx 0px 0px 34rpx;
	display: flex;
	align-items: center;
	font-size: 24rpx;
	color: #ffffff;
	z-index: 100;
	&.integral_switch {
		top: 150rpx;
	}
	.icon {
		margin: 0 12rpx 0 18rpx;
	}
}
</style>
